<template>
  <div class="video">
    <!-- 头部 -->
    <div class="top">
      <p class="iconfont icon-piao" style="font-size: 25px"></p>
      <input type="text" placeholder="请输入内容" />
      <p
        class="iconfont icon-paihangbang"
        @click="toRanList()"
        style="font-size: 25px"
      ></p>
    </div>
    <!-- 主要的 -->
    <main>
      <van-tabs>
        <audio v-if="isShow1 == true" :src="url1" autoplay="autoplay"></audio>
        <van-tab title="视 频">
          <div class="pic" v-for="item in list" :key="item.playTime">
            <van-cell @click="showPopup">
              <img
                :src="item.coverUrl"
                @click="Play(item.vid)"
                alt=""
                srcset=""
              />
              <p>{{ item.title }}</p>
            </van-cell>
            <van-popup v-model="show">
              <video :src="url" autoplay="autoplay" preload controls></video>
            </van-popup>
          </div>
          <div class="wuyong"></div>
        </van-tab>
        <van-tab title="电 台1">
          <div class="pic" v-for="item in list1" :key="item.id">
            <img
              @click="PlayTai(item.id)"
              :src="item.picUrl"
              alt=""
              srcset=""
            />
            <p>{{ item.lastProgramName }}</p>
          </div>
          <div class="wuyong"></div>
        </van-tab>
        <van-tab title="电 台2">
          <div class="pic" v-for="item in list2" :key="item.id">
            <img :src="item.avatarUrl" alt="" srcset="" />
            <p>{{ item.nickName }}</p>
          </div>
          <div class="wuyong"></div>
        </van-tab>

        <van-tab title="专辑">
          <div class="pic" v-for="item in list3" :key="item.albumId">
            <img :src="item.coverUrl" alt="" srcset="" />
            <p>{{ item.albumName }}</p>
            <p>专辑作者：{{ item.artistName }}</p>
          </div>
          <div class="wuyong"></div>
        </van-tab>
      </van-tabs>
    </main>
  </div>
</template>

<script>
import {
  videoAPI,
  video1API,
  video2API,
  video3API,
  videoPlayAPI,
  diantaiPlayAPI,
  dtIDAPI,
} from "../services/Video";

export default {
  data() {
    return {
      list: {},
      list1: {},
      list2: {},
      list3: {},
      show: false,
      isShow1: false,
      isShow2: false,
      url: "",
      url1: "",
      vid: "",
    };
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    toRanList() {
      this.$router.push({
        name: "RankList",
      });
    },
    async Play(v) {
      // console.log(v);
      const resPlay = await videoPlayAPI(v);
      this.url = resPlay.urls[0].url;
      // console.log(resPlay.urls[0].url);
      this.isShow = !this.isShow;
    },
    async PlayTai(v) {
      // console.log(v);
      const resDT = await dtIDAPI(v);
      const resId = resDT.programs[0].mainSong.id;
      // console.log(resDT.programs[0].mainSong.id);
      const resPlayDiantai1 = await diantaiPlayAPI(resId);
      this.url1 = resPlayDiantai1.data[0].url;
      // console.log(this.url1);
      this.isShow1 = !this.isShow1;
    },
  },
  async created() {
    const resVideo = await videoAPI;
    this.list = resVideo.data;
    const resVideo1 = await video1API;
    this.list1 = resVideo1.data;
    const resVideo2 = await video2API;
    this.list2 = resVideo2.data.list;
    const resVideo3 = await video3API;
    this.list3 = resVideo3.products;
  },
};
</script>

<style scoped>
.wuyong {
  height: 40px;
}
.top {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  border-bottom: 14px solid #f2f2f2;
}
.top p:nth-child(1) {
  text-align: center;
  line-height: 50px;
  width: 40px;
  height: 50px;
}
.top input {
  height: 30px;
  flex: 1;
  border-radius: 30px;
  margin-top: 10px;
  text-align: center;
  background-color: #eeeeee;
  border: 1px solid #eeeeee;
}
video {
  width: 100%;
  height: 300px;
}
.top p:nth-child(3) {
  width: 40px;
  height: 50px;
  text-align: center;
  line-height: 50px;
}
.pic {
  border-bottom: 14px solid #f2f2f2;
}
</style>
